<script setup>
defineOptions({
  name: 'AppHome'
})
import {
  getCarouselImg,
  getAllClass,
  getFreshItem,
  getHotItem,
  getBrand
} from '@/api/home.js'
import { onMounted, ref } from 'vue'
const carouselImg = ref()
onMounted(async () => {
  const res = await getCarouselImg()
  carouselImg.value = res.result
})
const classList = ref([])
onMounted(async () => {
  const res = await getAllClass()
  classList.value = res.result
})

const filterData = ref('')
const show = (id) => {
  const res = classList.value.filter((item) => item.id === id)
  filterData.value = res[0]
}

//新鲜好物
const newItems = ref([])
onMounted(async () => {
  const res = await getFreshItem()
  newItems.value = res.result
  console.log(newItems.value)
})

//人气推荐
const hotItem = ref([])
onMounted(async () => {
  const res = await getHotItem()
  hotItem.value = res.result
  console.log(hotItem.value)
})

//热门品牌
const brand = ref([])
onMounted(async () => {
  const res = await getBrand()
  console.log('热门', res.result)
  brand.value = res.result
})
</script>

<template>
  <section>
    <div
      class="position-relative px-5"
      @mouseleave="filterData = ''"
      style="height: 500px"
    >
      <el-carousel height="500px" autoplay>
        <el-carousel-item
          v-loading="!carouselImg.length"
          v-for="value in carouselImg"
          :key="value.id"
        >
          <img :src="value.imgUrl" alt="" />
        </el-carousel-item>
        <div class="position-absolute row w-100 h-100">
          <ul
            class="list m-0 list-unstyled d-flex flex-column justify-content-around col-3"
          >
            <li
              v-for="value in classList"
              class="text-white"
              @mouseenter="show(value.id)"
              :key="value.id"
            >
              {{ value.name }}
            </li>
          </ul>
          <div
            class="col-9 d-flex flex-column justify-content-around"
            style="background: rgba(255, 255, 255, 0.8); height: 500px"
            v-if="filterData"
          >
            <h3>分类推荐</h3>
            <div class="row row-cols-3">
              <div
                class="col"
                v-for="value in filterData.goods"
                :key="value.id"
              >
                <div class="d-flex goods align-items-center p-3">
                  <img
                    :src="value.picture"
                    class="img-fluid"
                    width="80"
                    height="80"
                    alt=""
                  />
                  <div class="my-auto">
                    <div>{{ value.name }}</div>
                    <div class="text-secondary">{{ value.desc }}</div>
                    <div class="text-danger">{{ '￥' + value.price }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-carousel>
    </div>

    <div class="w-100 bg-white p-5">
      <div class="">
        <div class="d-flex align-items-center">
          <h1>新鲜好物</h1>
          <span class="text-secondary mx-5">新鲜出炉 品质靠谱</span>
        </div>
        <div class="row">
          <goods v-for="item in newItems" :key="item.id" :item="item"></goods>
        </div>
      </div>
    </div>

    <div class="w-100 bg-white p-5">
      <div class="">
        <div class="d-flex align-items-center">
          <h1>人气推荐</h1>
          <span class="text-secondary mx-5">人气爆款 不容错过</span>
        </div>
        <div class="row">
          <goods v-for="item in hotItem" :key="item.id" :item="item"></goods>
        </div>
      </div>
    </div>

    <div class="row">
      <div
        class="col-12 col-md-6 col-lg-3"
        v-for="value in brand"
        :key="value.id"
      >
        <div class="card border-0 m-4" style="cursor: pointer">
          <div class="card-body text-center">
            <img
              :src="value.picture"
              class="img-fluid d-block mx-auto"
              alt=""
            />
            <h3>
              {{ value.name }}
            </h3>
            <p class="text-secondary">
              {{ value.place }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped lang="scss">
.list li {
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  padding: 16px 0px;
  &:hover {
    background-color: rgba(0, 147, 83, 0.8);
  }
}
.goods {
  background-color: white;
  cursor: pointer;
  &:hover {
    background-color: #8ff8bb;
  }
}
.row > div {
  transition: 0.7s;
}
</style>
